<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>css3多款不同加载等待动画效果</title>
  <style>
  body {
    background: #f3f6f9;
    font-family: sans-serif;
    font-weight: 100;
    font-size: 14px;
    margin: 0;
    padding: 20px;
  }
  .grid {
    overflow: hidden;
  }
  .cell {
    float: left;
    width: 25%;
    box-sizing: border-box;
    padding: 20px;
    display: table;
  }
  .card {
    background: white;
    border: 1px solid #c3c6cf;
    border-radius: 15px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 200px;
  }
  </style>
  <link rel="stylesheet" href="css/spinners.css" type="text/css">
</head>
<body>
  <div class="grid">
    <div class="cell">
      <div class="card">
        <span class="spinner-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="throbber-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="refreshing-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="heartbeat-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="gauge-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="timer-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="three-quarters-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="wobblebar-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="atebits-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="whirly-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="flower-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="dots-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="circles-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="plus-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="ball-loader">Loading&#8230;</span>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <span class="hexdots-loader">Loading&#8230;</span>
      </div>
    </div>
  </div>
</body>
</html>
